<!--  圆角设置  -->
<template>
  <div class="colStart">
    <div class="rowBetween">
      <div class="rowStart">
        <div class="cLabel">半径</div>
        <el-input-number v-model="_widget.style.borderRadius" controls-position="right" style="width: 120px" />
      </div>
    </div>
    <div class="rowStart mt-4" style="align-items: center">
      <div class="cLabel" style="margin-right: 20px">可见性</div>
      <div style="position: relative; width: 90px; flex-wrap: wrap" class="rowStart">
        <div :style="getStyle" class="cRect"></div>
        <div class="cSquare" @click.stop="onShowRadius(0)"></div>
        <div class="cSquare" style="margin-left: 20px" @click.stop="onShowRadius(1)"></div>
        <div class="cSquare" style="margin-top: 20px" @click.stop="onShowRadius(3)"></div>
        <div class="cSquare" style="margin-left: 20px; margin-top: 20px" @click.stop="onShowRadius(2)"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { TypeWidget } from "@/types/TypeDesign";
import type { PropType } from "vue";
import { computed } from "vue";

const props = defineProps({
  _widget: {
    type: Object as PropType<TypeWidget>,
    default: () => ({}),
  },
});

const getStyle = computed(() => {
  let _style = {};
  if (props._widget.style.borderRadiusPos![0] == 1) {
    _style["borderTopLeftRadius"] = "15px";
  }
  if (props._widget.style.borderRadiusPos![1] == 1) {
    _style["borderTopRightRadius"] = "15px";
  }
  if (props._widget.style.borderRadiusPos![2] == 1) {
    _style["borderBottomRightRadius"] = "15px";
  }
  if (props._widget.style.borderRadiusPos![3] == 1) {
    _style["borderBottomLeftRadius"] = "15px";
  }
  return _style;
});

const onShowRadius = (index: number) => {
  if (props._widget.style.borderRadiusPos![index] == 0) {
    props._widget.style.borderRadiusPos![index] = 1;
  } else {
    props._widget.style.borderRadiusPos![index] = 0;
  }
};
</script>

<style lang="scss" scoped>
.cLabel {
  font-size: 14px;
  width: 60px;
  text-align: center;
}

.cSquare {
  width: 30px;
  height: 30px;
  border: solid 1px gray;
  z-index: 100;
}

.cRect {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 15px;
  top: 15px;
  border: solid 1px gray;
}
</style>
